<template>
    <div class="sjhjCenter">
        <div class="lbChart">
            <div class="lbTitle">按类别统计</div>
            <div id="lbChart"></div>
        </div>
        <div class="sxChart">
            <div class="sxTitle">按市县分布统计</div>
            <div id="sxChart"></div>
        </div>
        <div class="tableInfo" v-show="false"></div>
    </div>
</template>

<script>
import ThemeTitle from "../../common/ThemeTitle";
import { onMounted, ref, watch, reactive, nextTick } from "vue";
import { useStore } from "vuex";
import { get } from "../../../util/request";
import axios from "axios";
import echarts from "echarts";
import { ElLoading } from "element-plus";
export default {
    components: {
        ThemeTitle,
    },
    setup() {
        const store = useStore();
        let models = reactive({});
        let currentTypeUrl = ref("");
        let currentTypesUrl = ref("");
        function drawSXChart(data) {
            var dom = document.getElementById("sxChart");
            var myChart = echarts.init(dom);
            let xData = data.map((item) => {
                return item.name;
            });
            let yData = data.map((item) => {
                return item.value;
            });
            let option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                grid: {
                    top: "25%",
                    right: "3%",
                    left: "10%",
                    bottom: "30%",
                },
                xAxis: [
                    {
                        type: "category",
                        data: xData,
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,0.12)",
                            },
                        },
                        axisLabel: {
                            margin: 10,
                            color: "#e2e9ff",
                            rotate: 30,
                            textStyle: {
                                fontSize: 10,
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        name: "单位：个",
                        axisLabel: {
                            formatter: "{value}",
                            color: "#e2e9ff",
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "rgba(255,255,255,1)",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,0.12)",
                            },
                        },
                    },
                ],
                series: [
                    {
                        type: "bar",
                        data: yData,
                        barWidth: "10px",
                        itemStyle: {
                            normal: {
                                color: "rgba(0,244,255,1)",
                                // new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: 'rgba(0,244,255,1)' // 0% 处的颜色
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(0,77,167,1)' // 100% 处的颜色
                                // }], false),
                                barBorderRadius: [0, 0, 0, 0],
                                shadowColor: "rgba(0,160,221,1)",
                                shadowBlur: 4,
                            },
                        },
                        label: {
                            normal: {
                                show: false,
                                lineHeight: 30,
                                width: 80,
                                height: 30,
                                backgroundColor: "rgba(0,160,221,0.1)",
                                borderRadius: 200,
                                position: ["-8", "-60"],
                                distance: 1,
                                formatter: [
                                    "    {d|●}",
                                    " {a|{c}}     \n",
                                    "    {b|}",
                                ].join(","),
                                rich: {
                                    d: {
                                        color: "#3CDDCF",
                                    },
                                    a: {
                                        color: "#fff",
                                        align: "center",
                                    },
                                    b: {
                                        width: 1,
                                        height: 30,
                                        borderWidth: 1,
                                        borderColor: "#234e6c",
                                        align: "left",
                                    },
                                },
                            },
                        },
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }
        function drawLBChart(dataVal) {
            var dom = document.getElementById("lbChart");
            var myChart = echarts.init(dom);
            let data1 = [
                {
                    value: 1,
                    name: "rose1",
                    itemStyle: {
                        color: "rgba(50,123,250,0.7)",
                        borderColor: "rgba(50,123,250,1)",
                        borderWidth: 3,
                    },
                },
                {
                    value: 2,
                    name: "rose2",
                    itemStyle: {
                        color: "rgba(244,201,7,0.7)",
                        borderColor: "rgba(244,201,7,1)",
                        borderWidth: 3,
                    },
                },
                {
                    value: 3,
                    name: "rose3",
                    itemStyle: {
                        color: "rgba(23,216,161,0.7)",
                        borderColor: "rgba(23,216,161,1)",
                        borderWidth: 3,
                    },
                },
                {
                    value: 4,
                    name: "rose4",
                    itemStyle: {
                        color: "rgba(122,60,235,0.7)",
                        borderColor: "rgba(122,60,235,1)",
                        borderWidth: 3,
                    },
                },
                {
                    value: 5,
                    name: "rose5",
                    itemStyle: {
                        color: "rgba(15,197,243,0.7)",
                        borderColor: "rgba(15,197,243,1)",
                        borderWidth: 3,
                    },
                },
                {
                    value: 6,
                    name: "rose5",
                    itemStyle: {
                        color: "rgba(15,197,243,0.7)",
                        borderColor: "rgba(15,197,243,1)",
                        borderWidth: 3,
                    },
                },
                {
                    value: 7,
                    name: "rose5",
                    itemStyle: {
                        color: "rgba(15,197,243,0.7)",
                        borderColor: "rgba(15,197,243,1)",
                        borderWidth: 3,
                    },
                },
                {
                    value: 8,
                    name: "rose5",
                    itemStyle: {
                        color: "rgba(15,197,243,0.7)",
                        borderColor: "rgba(15,197,243,1)",
                        borderWidth: 3,
                    },
                },
            ];
            let data = data1.slice(0, dataVal.length);
            dataVal.forEach((item, index) => {
                data[index].name = item.name;
                data[index].value = item.value;
            });
            let dataArr = dataVal.map((item) => {
                return item.name;
            });
            let option = {
                // legend: {
                //     orient: 'vertical',
                //     top: "center",
                //     right: "5%",
                //     data: dataArr,
                //     textStyle: {
                //         color: "#fff",
                //         fontSize: 16
                //     }
                // },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)",
                },
                series: [
                    {
                        name: "占比",
                        type: "pie",
                        radius: ["30%", "80%"],
                        center: ["40%", "50%"],
                        roseType: "radius",
                        label: {
                            show: true,
                            normal: {
                                position: "outside",
                                fontSize: 16,
                            },
                        },
                        labelLine: {
                            length: 1,
                            length2: 20,
                            smooth: true,
                        },
                        data: data,
                        minAngle: 30,
                    },
                ],
            };
            myChart.setOption(option);
            myChart.on("click", pieConsole);
            function pieConsole(param) {
                getSXData(param.name);
                // 　　clickFunc(param.dataIndex);//执行点击效果,触发相应js函数
                //param具体包含的方法见 https://blog.csdn.net/allenjay11/article/details/76033232

                //刷新页面
                // location.reload();
                // window.location.reload();
            }
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }
        // let loadingInstance = null;
        function getSXData(name) {
            layerManager.removeAll();
            // loadingInstance = ElLoading.service({
            //     lock: false,
            //     text: '数据加载中',
            //     spinner: 'el-icon-loading',
            //     background: 'rgba(0, 0, 0, 0.7)'
            // })
            if (currentTypeUrl.value == "yjwz") {
                //
                get(
                    `/api/aggregation/findRbMaterialwarehouse?pageSize=65534&startPage=1`
                ).then((res) => {
                    //layerManager.addPoint(res, "#ffff00" , name ,"leftClick",clickHandleNoModel);
                    layerManager.addPoint(
                        res,
                        "#ffff00",
                        name,
                        "leftClick",
                        clickHandle
                    );

                    let data = [
                        { name: "物资物资储备点", value: 30 },
                        { name: "物资仓库", value: 277 },
                    ];
                    drawSXChart(data);
                    nextTick(() => {
                        // loadingInstance.close();
                        //layerManager.fly(109.91123654020095,18.544365698380496,504517,6.277847123239442,-1.4135590100182913,0.0012463398789694935)
                    });
                });
            } else if (currentTypeUrl.value == "jyll") {
                switch (
                    name //1,消防救援力量(有坐标)。2，森林防火救队伍（无坐标）。3，社会救援力量（有坐标）。4，应急管理专家（无坐标）
                ) {
                    case "消防救援力量":
                        get(`/api/aggregation/countFirebrigade`).then((res) => {
                            nextTick(() => {
                                // loadingInstance.close();
                            });
                            drawSXChart(res);
                        });
                        get(
                            `/api/aggregation/findFirebrigade?pageSize=65534&startPage=1`
                        ).then((res) => {
                            //layerManager.addPoint(res, "#ffff00" , name ,"leftClick",clickHandleNoModel);
                            layerManager.addPoint(
                                res,
                                "#ffff00",
                                name,
                                "leftClick",
                                clickHandle
                            );
                        });
                        break;
                    case "森林防火救队伍":
                        get(`/api/aggregation/countForestFireteam`).then(
                            (res) => {
                                nextTick(() => {
                                    // loadingInstance.close();
                                });
                                drawSXChart(res);
                            }
                        );
                        break;
                    case "社会救援力量":
                        get(`/api/aggregation/countSocialOrg`).then((res) => {
                            nextTick(() => {
                                // loadingInstance.close();
                            });
                            drawSXChart(res);
                        });
                        get(
                            `/api/aggregation/findFirebrigade?pageSize=65534&startPage=1`
                        ).then((res) => {
                            //layerManager.addPoint(res, "#ffff00" , name ,"leftClick",clickHandleNoModel);
                            layerManager.addPoint(
                                res,
                                "#ffff00",
                                name,
                                "leftClick",
                                clickHandle
                            );
                        });
                        break;
                    case "应急管理专家": //没有统计的市县分布，有类别数量
                        // get(`/api/aggregation/findRbMaterialwarehouse?pageSize=65534&startPage=1`).then((res)=>{
                        let data = [
                            // "naturalDisasterNum": 48,
                            // "informationNum": 33,
                            // "publicHealthNum": 24,
                            // "accidentDisasterNum": 275
                            { name: "自然灾害类专家", value: 48 },
                            { name: "综合咨询类", value: 33 },
                            { name: "公共卫生社会安全类", value: 24 },
                            { name: "事故灾难类专家", value: 275 },
                        ];
                        drawSXChart(data);
                        nextTick(() => {
                            // loadingInstance.close();
                            // layerManager.fly(109.91123654020095,18.544365698380496,504517,6.277847123239442,-1.4135590100182913,0.0012463398789694935)
                        });
                        // })
                        break;
                }
            } else if (currentTypeUrl.value == "xuexiao") {
            } else {
                get(`${currentTypeUrl.value}${name}`).then((res) => {
                    drawSXChart(res.data);
                });
                get(
                    `${currentTypesUrl.value}${name}?pageSize=65534&startPage=1`
                ).then((res) => {
                    nextTick(() => {
                        // loadingInstance.close();
                        //layerManager.fly(109.91123654020095,18.544365698380496,504517,6.277847123239442,-1.4135590100182913,0.0012463398789694935)
                    });
                    if (
                        currentTypeUrl.value == "/api/pandect/risk/earthquake/"
                    ) {
                        let arrA = res.data.contents[0].shape;
                        let arrB = arrA
                            .substring(9, arrA.length - 2)
                            .replace(/\s+/g, ",")
                            .split(",")
                            .map((item) => {
                                return parseFloat(item);
                            });
                        layerManager.addPloygonLine("dizhendai", arrB);
                        res.data.contents[0].lng = 110.198418;
                        res.data.contents[0].lat = 20.045805;
                        //clickHandle(item.data.contents[0])
                        layerManager.fly(
                            114.57823782971217,
                            6.623890048817367,
                            2798207,
                            6.237804420341853,
                            -1.0533895684285746,
                            0.00008672007331433917
                        );
                        let data5 = {
                            flowing: true,
                            flowImage: "./libs/ysCesium/images/colors1.png", //飞行线的图片
                            options: {
                                id: "dizhendaiqiang",
                                name: "this is YELLOW wall from surface",
                                wall: {
                                    positions:
                                        Cesium.Cartesian3.fromDegreesArrayHeights(
                                            [
                                                108.426949, 22.166395, 50000,
                                                109.203345, 22.528423, 50000,
                                                110.063293, 23.1332, 50000,
                                                112.845996, 25.1117690000001,
                                                50000, 116.825634,
                                                27.9436870000001, 50000,
                                                118.098646, 29.4951880000001,
                                                50000, 123.784132,
                                                29.7940869999999, 50000,
                                                121.359363, 25.749013, 50000,
                                                120.742332, 25.1439320000001,
                                                50000, 119.980562, 24.174429,
                                                50000, 119.0991, 23.04978,
                                                50000, 117.990467,
                                                22.2397130000001, 50000,
                                                116.840811, 21.0496210000001,
                                                50000, 115.232586,
                                                19.9863730000001, 50000,
                                                113.638058, 19.3897250000001,
                                                50000, 109.205235,
                                                16.4189800000001, 50000,
                                                108.5249, 15.95063, 50000,
                                                107.2719, 17.2173500000001,
                                                50000, 105.391918,
                                                20.3031360000001, 50000,
                                                108.426949, 22.166395, 50000,
                                            ]
                                        ),
                                    minimumHeights: [
                                        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                                        0, 0, 0, 0, 0, 0, 0,
                                    ], //墙距离地面的距离。
                                    material: Cesium.Color.YELLOW,
                                    interval: 3000, //混合颜色、(红绿混合透明后 就是黄色了)3000秒发射间隔,单纯材质无法展示飞行动态。所以去掉了。
                                    outline: false,
                                },
                            },
                        };
                        fmh.addWall(data5);
                    } else {
                        layerManager.addPoint(
                            res.data.contents,
                            "#ffff00",
                            name,
                            "leftClick",
                            clickHandle
                        );
                        // res.data.contents.forEach((item,index)=>{
                        //         if(item.lng){
                        //             layerManager.addBillboard("asd"+index,item.lng,item.lat,"/data/images/earth/local1.png")
                        //         }
                        // })
                    }
                });
            }
        }
        function clickHandleNoModel(id) {
            if (document.getElementById("zaihaiInfo")) {
                css3Renderer.remove("zaihaiInfo");
            }
            let ids = id.item;
            let type = id.dataType;
            let idArr = Object.keys(ids);
            let idArr1 = idArr.filter((item) => {
                return typeof ids[item] !== "object";
            });
            // let modelObj = {};
            // for (let key in models){
            //     if(key.toString().indexOf(type)>-1){
            //         modelObj =  models[key].properties
            //     }
            // }
            // let idArr2 = idArr1.filter((item)=>{
            //     return modelObj.hasOwnProperty(item)
            // })
            if (type === "") {
            }
            let htmlStr = `${idArr1
                .map(function (item, index) {
                    return `<tr>
                        <td style="border:1px solid #155e75">${item}</td>
                        <td style="border:1px solid #155e75" >${ids[item]}</td>
                    </tr>`;
                })
                .join("")}`;
            // let htmlStr = `${idArr1.map(function (item, index) {
            //     return `<tr>
            //         <td>${item}</td>
            //         <td >${ids[item]}</td>
            //     </tr>`;
            // }).join('')}`;
            css3Renderer.append({
                id: "zaihaiInfo",
                position: [ids.lng, ids.lat, 10],
                element: `
                        <div class='ysc-dynamic-layer ys-css3-box' id='zaihaiInfo'>
                            <div class='line'></div>
                            <div class='mainTable'>
                                <div class="tableTitle">${type}</div>
                                <table border="5" style="
                                width: 100%;
                                line-height: 20px;
                                text-align: center;
                                border-color: #155e75;
                                border-collapse: collapse;">
                                    ${htmlStr}
                                </table>
                            </div>
                        </div>
                    `,
                offset: [10, -250],
            });
        }
        function clickHandle(id) {
            if (document.getElementById("zaihaiInfo")) {
                css3Renderer.remove("zaihaiInfo");
            }
            viewer.entities.removeById("tubiao");
            let ids = id.item;
            let type = id.dataType;
            let idArr = Object.keys(ids);
            let idArr1 = idArr.filter((item) => {
                return typeof ids[item] !== "object";
            });
            let modelObj = {};
            for (let key in models) {
                if (key.toString().indexOf(type) > -1) {
                    modelObj = models[key].properties;
                }
            }
            let idArr2 = idArr1.filter((item) => {
                return modelObj.hasOwnProperty(item);
            });
            switch (type) {
                case "易受淹小区":
                    layerManager.addBillboard(
                        "tubiao",
                        id.item["lng"],
                        id.item["lat"],
                        `./data/images/earth/${type}.png`
                    );
                    break;
                case "漫水桥":
                    layerManager.addBillboard(
                        "tubiao",
                        id.item["lng"],
                        id.item["lat"],
                        `./data/images/earth/${type}.png`
                    );
                    break;
                case "危房":
                    layerManager.addBillboard(
                        "tubiao",
                        id.item["lng"],
                        id.item["lat"],
                        `./data/images/earth/${type}.png`
                    );
                    break;
                case "低洼地":
                    layerManager.addBillboard(
                        "tubiao",
                        id.item["lng"],
                        id.item["lat"],
                        `./data/images/earth/${type}.png`
                    );
                    break;
                case "景区":
                    layerManager.addBillboard(
                        "tubiao",
                        id.item["lng"],
                        id.item["lat"],
                        `./data/images/earth/${type}.png`
                    );
                    break;
                case "堤防":
                    layerManager.addBillboard(
                        "tubiao",
                        id.item["lng"],
                        id.item["lat"],
                        `./data/images/earth/${type}.png`
                    );
                    break;
                case "水闸":
                    layerManager.addBillboard(
                        "tubiao",
                        id.item["lng"],
                        id.item["lat"],
                        `./data/images/earth/${type}.png`
                    );
                    break;
                case "水库":
                    layerManager.addBillboard(
                        "tubiao",
                        id.item["lng"],
                        id.item["lat"],
                        `./data/images/earth/${type}.png`
                    );
                    break;
                case "崩塌":
                    layerManager.addBillboard(
                        "tubiao",
                        id.item["lng"],
                        id.item["lat"],
                        `./data/images/earth/${type}.png`
                    );
                    break;
                case "泥石流":
                    layerManager.addBillboard(
                        "tubiao",
                        id.item["lng"],
                        id.item["lat"],
                        `./data/images/earth/${type}.png`
                    );
                    break;
                case "滑坡":
                    layerManager.addBillboard(
                        "tubiao",
                        id.item["lng"],
                        id.item["lat"],
                        `./data/images/earth/${type}.png`
                    );
                    break;

                default:
                    break;
            }
            let htmlStr = `${idArr2
                .map(function (item, index) {
                    return `<tr>
                        <td style="border:1px solid #155e75">${modelObj[item].description}</td>
                        <td style="border:1px solid #155e75" >${ids[item]}</td>
                    </tr>`;
                })
                .join("")}`;
            // let htmlStr = `${idArr1.map(function (item, index) {
            //     return `<tr>
            //         <td>${item}</td>
            //         <td >${ids[item]}</td>
            //     </tr>`;
            // }).join('')}`;
            css3Renderer.append({
                id: "zaihaiInfo",
                position: [ids.lng, ids.lat, 10],
                element: `
                        <div class='ysc-dynamic-layer ys-css3-box' id='zaihaiInfo'>
                            <div class='line'></div>
                            <div class='mainTable'>
                                <div class="tableTitle">${type}</div>
                                <table border="5" style="
                                width: 100%;
                                line-height: 20px;
                                text-align: center;
                                border-color: #155e75;
                                border-collapse: collapse;">
                                    ${htmlStr}
                                </table>
                            </div>
                        </div>
                    `,
                offset: [10, -250],
            });
        }
        //根据折叠菜单传递的数据，渲染左边的饼图
        function getData(url) {
            get(url).then((res) => {
                drawLBChart(res.data);
            });
            // /api/pandect/risk/earthquakeTypes
            // /api/pandect/risk/earthTypes
            // /api/pandect/risk/forestTypes
        }
        watch(
            () => store.state.sjzlCenterState,
            (newVlaue) => {
                switch (newVlaue) {
                    case "水旱灾害风险区":
                        getData("/api/pandect/risk/waterTypes");
                        currentTypeUrl.value = "/api/pandect/risk/water/";
                        currentTypesUrl.value = "/api/pandect/risk/waters/";
                        break;
                    case "地质灾害风险区":
                        getData("/api/pandect/risk/earthTypes");
                        currentTypeUrl.value = "/api/pandect/risk/earth/";
                        currentTypesUrl.value = "/api/pandect/risk/earths/";
                        break;
                    case "地震灾害风险区":
                        getData("/api/pandect/risk/earthquakeTypes");
                        currentTypeUrl.value = "/api/pandect/risk/earthquake/";
                        currentTypesUrl.value =
                            "/api/pandect/risk/earthquakes/";
                        break;
                    case "森林资源灾害风险区":
                        getData("/api/pandect/risk/forestTypes");
                        currentTypeUrl.value = "/api/pandect/risk/forest/";
                        currentTypesUrl.value = "/api/pandect/risk/forests/";
                        break;
                    case "安全生产危险源":
                        getData("/api/pandect/safety/produceTypes");
                        currentTypeUrl.value = "/api/pandect/safety/produce/";
                        currentTypesUrl.value = "/api/pandect/safety/produces/";
                        break;
                    case "运输安全危险源":
                        getData("/api/pandect/safety/transportTypes");
                        currentTypeUrl.value = "/api/pandect/safety/transport/";
                        currentTypesUrl.value =
                            "/api/pandect/safety/transports/";
                        break;
                    case "安全生产企业":
                        getData("/api/pandect/safety/productionTypes");
                        currentTypeUrl.value =
                            "/api/pandect/safety/production/";
                        currentTypesUrl.value =
                            "/api/pandect/safety/productions/";
                        break;
                    case "铁路环境安全隐患点":
                        getData("/api/pandect/safety/transportTypes");
                        currentTypeUrl.value = "/api/pandect/safety/transport/";
                        currentTypesUrl.value =
                            "/api/pandect/safety/transports/";
                        break;
                    case "应急物资":
                        yjwz();
                        currentTypeUrl.value = "yjwz";
                        currentTypesUrl.value = "yjwz";
                        break;
                    case "救援力量":
                        //1,消防救援力量(有坐标)。2，森林防火队伍（无坐标）。3，社会救援力量（有坐标）。4，应急管理专家（无坐标）
                        jyll();
                        currentTypeUrl.value = "jyll";
                        currentTypesUrl.value = "jyll";
                        break;
                    case "学校":
                        currentTypeUrl.value = "xuexiao";
                        currentTypesUrl.value = "xuexiao";
                        break;
                }
            }
        );
        function jyll() {
            Promise.all([
                get(
                    "/api/aggregation/findFirebrigade?pageSize=65534&startPage=1"
                ),
                get(
                    "/api/aggregation/findForestFireteam?pageSize=65534&startPage=1"
                ),
                get(
                    "/api/aggregation/findSocialOrg?pageSize=65534&startPage=1"
                ),
                get("/api/aggregation/findExpert?pageSize=65534&startPage=1"),
            ]).then((res) => {
                let data = [
                    { name: "消防救援力量", value: res[0].length },
                    { name: "森林防火救队伍", value: res[1].length },
                    { name: "社会救援力量", value: res[2].length },
                    { name: "应急管理专家", value: res[3].length },
                ];
                drawLBChart(data);
            });
        }
        function yjwz() {
            drawLBChart([{ name: "应急物资", value: "307" }]);
            // Promise.all(
            //     [
            //         get('/api/aggregation/findFirebrigade?pageSize=65534&startPage=1'),
            //         get('/api/aggregation/findForestFireteam?pageSize=65534&startPage=1'),
            //         get('/api/aggregation/findSocialOrg?pageSize=65534&startPage=1'),
            //         get('/api/aggregation/findExpert?pageSize=65534&startPage=1')
            //     ]
            // ).then((res)=>{
            //     let data = [
            //         {name:'消防救援力量',value:res[0].length},
            //         {name:'森林防火救队伍',value:res[1].length},
            //         {name:'社会救援力量',value:res[2].length},
            //         {name:'应急管理专家',value:res[3].length}
            //     ]
            //
            // })
        }
        onMounted(() => {
            //drawSXChart([{name:'',value:""}])
            axios.get("./data/api-docs.json").then((res) => {
                models = res.data.definitions;
            });
        });
        return {
            currentTypeUrl,
            currentTypesUrl,
        };
    },
};
</script>

<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .sjhjCenter {
        position: absolute;
        bottom: 0;
        height: vh(245);
        width: vw(1077);
        background: url('/data/images/sjhj/1077.png') no-repeat;
        background-size: 100% 100%;
        z-index: 3;
        left: vw(425);
        display: flex;
        box-sizing: border-box;
        justify-content: space-between;
        padding: vh(16) vw(53);

        .sxChart {
            .sxTitle {
                width: vw(124);
                line-height: vh(31);
                background: #094452;
                font-weight: 400;
                text-align: center;
                color: #ffffff;
            }

            #sxChart {
                width: vw(420);
                height: vh(160);
                margin-top: vh(10);
            }
        }

        .lbChart {
            .lbTitle {
                width: vw(124);
                line-height: vh(31);
                background: #094452;
                font-weight: 400;
                text-align: center;
                color: #ffffff;
            }

            #lbChart {
                width: vw(420);
                height: vh(160);
                margin-top: vh(10);
            }
        }

        .tableInfo {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            z-index: 3;
            width: vw(969);
            height: vh(504);
            background: url('/data/images/hngk/cssz.png') no-repeat;
            background-size: 100% 100%;
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .sjhjCenter {
        position: absolute;
        bottom: 0;
        height: vh(245);
        width: vw1(1077);
        background: url('/data/images/sjhj/1077.png') no-repeat;
        background-size: 100% 100%;
        z-index: 3;
        left: vw1(425);
        display: flex;
        box-sizing: border-box;
        justify-content: space-between;
        padding: vh(16) vw1(53);

        .sxChart {
            .sxTitle {
                width: vw1(124);
                line-height: vh(31);
                background: #094452;
                font-weight: 400;
                text-align: center;
                color: #ffffff;
            }

            #sxChart {
                width: vw1(420);
                height: vh(160);
                margin-top: vh(10);
            }
        }

        .lbChart {
            .lbTitle {
                width: vw1(124);
                line-height: vh(31);
                background: #094452;
                font-weight: 400;
                text-align: center;
                color: #ffffff;
            }

            #lbChart {
                width: vw1(420);
                height: vh(160);
                margin-top: vh(10);
            }
        }

        .tableInfo {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            z-index: 3;
            width: vw1(969);
            height: vh(504);
            background: url('/data/images/hngk/cssz.png') no-repeat;
            background-size: 100% 100%;
        }
    }
}
</style>